<script setup>
import { reactive, ref } from "vue";
import {
  RightOutlined,
  // CheckOutlined,
  // LockOutlined,
  ExclamationCircleOutlined,
  CheckCircleOutlined,
  LoadingOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";

const app = reactive({
  id: "1",
  name: "开发者用户名",
  names: "尚飞",
  aappID: 6251548,
  userID: 6251548,
  status: "审核中",
  number: "80527996@qq.com",
  benbn: "1.2.0",
  tel: "15083345956",
  title: "com.jsljk.apk",
  type: "个人",
  createTime: "2023/5/31 15:49:54",
  size: "52.35M",
  faces: "校验成功",
  standing: "未认证",
  address: "XXX省XXX市XXX区XXX镇XXX路XXX门牌号",
  description:
    "① 新增改名功能；② 新增商店物品预览功能；③ 优化举报系统；④ 优化广告观看体验",
  // icon: 'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
  icon:
    "https://ali-img.100520.com/images/202447/d659f861b95a5c0c1650b262b4c0a6bb_1id6snchu.png",
  sort: "冒险、益智、休闲、宠物",
  Language: "中文",
  introduce: "一场拥抱自由和温暖的云端之旅",
  age: "12+",
  intor:
    "时隔多年再度回归，开启一场难忘的社交冒险体验，在晴空与云海之中与翱翔的追梦者相遇。+",
  bannerList: [
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
  ],
  urls: [
    "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
    "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg",
    // 'https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png',
  ],
  videoTitle: "一场拥抱自由和温暖的云端之旅",
  videoUrl:
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
  videoFile:
    "https://ali-img.100520.com/app_logo/202444/a7c43a69684781b4565fd7c50e95bbd1.png",
});

const router = useRouter();

const navigateToChangeTel = (item, passw) => {
  router.push({
    name: "changeTheTel",
    params: {
      switchingType: item,
      ispassw: passw,
    },
  });
};

const questions = ref([
  {
    question: "一个公司可以注册2个开发商账号吗?",
    answer: "不可以，一个公司只能注册一个开发商账号。",
  },
  {
    question: "提供电子营业执照是否可以注册企业开发商资质吗?",
    answer:
      "平台暂时只支持高清营业执照原件彩色扫描件并在营业执照上手写“用于注册百分网游戏盒子开放平台开发者账号+日期”加盖公司印泥公章后拍照/扫描件进行上传注册。",
  },
  {
    question: "个人开发者注册有年龄限制吗？?",
    answer:
      "个人开发者类型注册，需要本人年龄满18周岁且不得超过65周岁。+日期”加盖公司印泥公章后拍照/扫描件进行上传注册。",
  },
  {
    question: "个人开发者没有公司，如何填写厂商名称？",
    answer: "建议以团队或工作室名称而非个人名称作为厂商名称，例如：XXX 工作室。",
  },
  {
    question: "开发者账号忘记密码或手机号无法登录开发者账号，该如何处理？",
    answer:
      "1、使用已绑定的邮箱获取验证码登录。2、如邮箱无法登录情况下，请点击 联系我们 。如开发者为个人主体需提供开发者个人信息，企业主体则需要提供企业信息，待审核通过信息确认无误，再重新注册开发者账号。",
  },
  {
    question: "开发者账号绑定的邮箱可以更换吗？",
    answer: "可以。请确认新邮箱未绑定其他账号，否则将无法成功换绑。",
  },
]);

const otherQuestions = ref(["网站出现了问题?", "如何注销账号?"]);
</script>

<template>
  <div class="app-container">
    <a-row :gutter="[8, 16]">
      <a-col :span="17">
        <a-card
          class="border-radius0"
          title="常见问题"
          :bordered="false"
          headStyle="text-align: left;font-weight: bold;font-size: 16px;"
          bodyStyle="padding:0 24px 12px"
        >
          <!-- <a-typography-title :level="5">账号与密码</a-typography-title>
          <a-typography-title :level="5">Q1、一个公司可以注册2个开发商账号吗？</a-typography-title
          >
          <a-typography-paragraph>
            A：不可以，一个公司只能注册一个开发商账号。
          </a-typography-paragraph>
          <a-typography-title :level="5">Q2、提供电子营业执照是否可以注册企业开发商资质吗？</a-typography-title
          >
          <a-typography-paragraph>
            A：平台暂时只支持高清营业执照原件彩色扫描件并在营业执照上手写“用于注册百分网游戏盒子开放平台开发者账号
            +日期”加盖公司印泥公章后拍照/扫描件进行上传注册。
          </a-typography-paragraph>
          <a-typography-title :level="5">Q3、个人开发者注册有年龄限制吗？</a-typography-title
          >
          <a-typography-paragraph>
            A：个人开发者类型注册，需要本人年龄满18周岁且不得超过65周岁。
          </a-typography-paragraph>
          <a-typography-title :level="5">Q4、个人开发者没有公司，如何填写厂商名称？</a-typography-title
          >
          <a-typography-paragraph>
            A：建议以团队或工作室名称而非个人名称作为厂商名称，例如：XXX
            工作室。
          </a-typography-paragraph>
          <a-typography-title :level="5">Q5、开发者账号忘记密码或手机号无法登录开发者账号，该如何处理？</a-typography-title
          >
          <a-typography-paragraph>
            A：1、使用已绑定的邮箱获取验证码登录。2、如邮箱无法登录情况下，请点击
            <a-typography-link href="" target="_blank" type="success">
              联系我们
            </a-typography-link>
            。如开发者为个人主体需提供开发者个人信息，企业主体则需要提供企业信息，待审核通过信息确认无误，再重新注册开发者账号。
          </a-typography-paragraph> -->

          <div class="box_left">
            <ul>
              <h4 class="title">账号与密码</h4>
              <li>
                <h4>Q1、一个公司可以注册2个开发商账号吗？</h4>
                <p>A：不可以，一个公司只能注册一个开发商账号。</p>
              </li>
              <li>
                <h4>Q2、提供电子营业执照是否可以注册企业开发商资质吗？</h4>
                <p>
                  A：平台暂时只支持高清营业执照原件彩色扫描件并在营业执照上手写“用于注册百分网游戏盒子开放平台开发者账号
                  +日期”加盖公司印泥公章后拍照/扫描件进行上传注册。
                </p>
              </li>
              <li>
                <h4>Q3、个人开发者注册有年龄限制吗？</h4>
                <p>A：个人开发者类型注册，需要本人年龄满18周岁且不得超过65周岁。</p>
              </li>
              <li>
                <h4>Q4、个人开发者没有公司，如何填写厂商名称？</h4>
                <p>
                  A：建议以团队或工作室名称而非个人名称作为厂商名称，例如：XXX 工作室。
                </p>
              </li>
              <li>
                <h4>Q5、开发者账号忘记密码或手机号无法登录开发者账号，该如何处理？</h4>
                <p>
                  A：1、使用已绑定的邮箱获取验证码登录。2、如邮箱无法登录情况下，请点击
                  <a-typography-link href="" target="_blank" type="success">
                    联系我们
                  </a-typography-link>
                  。如开发者为个人主体需提供开发者个人信息，企业主体则需要提供企业信息，待审核通过信息确认无误，再重新注册开发者账号。
                </p>
              </li>
              <li>
                <h4>Q6、开发者账号绑定的邮箱可以更换吗？</h4>
                <p>A：可以。请确认新邮箱未绑定其他账号，否则将无法成功换绑。</p>
              </li>
            </ul>
            <ul>
              <h4 class="title">相关问题</h4>
              <li>
                <h4>Q1、网站出现了问题？</h4>
                <p>
                  A：请点击
                  <a-typography-link href="" target="_blank" type="success">
                    问题反馈
                  </a-typography-link>
                  将问题简要描述后，反馈给我们。
                </p>
              </li>
              <li>
                <h4>Q2、如何注销账号？</h4>
                <p>
                  A：注销账号将删除与账号相关数据和应用信息，如需保留信息，
                  可在申请时选择转入新的账号。
                </p>
                <a-button
                  type="primary"
                  @click="() => router.push('/developerServices/cancelAccount')"
                >
                  注销账号
                </a-button>
              </li>
            </ul>
          </div>

          <!-- <div>
            <span style="font-size: 16px">账号与密码</span>
            <div
              v-for="(question, index) in questions"
              :key="index"
              class="question-answer"
            >
              <p class="question">Q{{ index + 1 }}、{{ question.question }}</p>
              <p class="answer">A: {{ question.answer }}</p>
            </div>
            <div
              v-for="otherQuestion in otherQuestions"
              :key="otherQuestion"
              class="other-questions"
            >
              <p>Q{{ otherQuestion }}</p>
            </div>
          </div> -->
        </a-card>
        <a-row :gutter="[8, 16]" class="marginTop12">
          <a-col :span="12">
            <a-card class="border-radius0 box1">
              <span>在线客服</span>
              <p>
                如果您在使用开放平台中遇到任何问题，请点击“联系客服”我们会尽快为您解答处理。
              </p>
              <a-button type="primary">联系客服</a-button>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card class="border-radius0 box1" :background-color="themeColors">
              <span>官方联方式</span>
              <ul>
                <li>客服QQ: 80527996</li>
                <li>客服邮箱：80527996@QQ.com</li>
                <li>在线时间： 9:00-18:00（工作日）</li>
              </ul>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="7">
        <a-card class="border-radius0 box" :background-color="themeColors">
          <div class="box_avatar">
            <a target="_blank" :href="app.icon">
              <img
                :src="app.icon"
                style="
                  display: block;
                  width: 100%;
                  height: 70px;
                  vertical-align: middle;
                  border-radius: 50%;
                "
              />
            </a>
            <span>{{ app.name }}</span>
            <span class="box_avatar_qq">企业/个人账号：{{ app.number }}</span>
          </div>
        </a-card>
        <a-card class="border-radius0">
          <a-descriptions title="开发者信息" bordered size="small">
            <template #extra>
              <RightOutlined />
            </template>
            <a-descriptions-item label="用户类型" :span="16">{{
              app.type
            }}</a-descriptions-item>
            <a-descriptions-item label="UserID" :span="16">6251548</a-descriptions-item>
            <a-descriptions-item label="身份认证" :span="16">
              <a-tag color="success" v-if="app.status === '审核成功'">{{
                app.status
              }}</a-tag>
              <a-tag
                color="warning"
                v-else-if="app.status === '审核中'"
                :bordered="false"
                >{{ app.status }}</a-tag
              >
              <a-tag
                color="error"
                :bordered="false"
                v-else-if="app.status === '审核失败'"
                >{{ app.status }}</a-tag
              >
              <span
                v-if="app.status === '审核成功'"
                style="color: #31bc63"
                class="descriptions_span"
              >
                <CheckCircleOutlined />
              </span>
              <span v-else-if="app.status === '审核中'" class="descriptions_span">
                <LoadingOutlined />
              </span>
              <span
                v-else-if="app.status === '审核失败'"
                class="descriptions_span"
                style="color: red"
              >
                <ExclamationCircleOutlined />
              </span>
              <span v-else-if="app.status === '审核错误'"
                ><a-badge status="error"
              /></span>
            </a-descriptions-item>
            <a-descriptions-item
              v-if="app.standing === '未认证'"
              label="企业认证"
              :span="16"
            >
              <a-tag :bordered="false">{{ app.standing }}</a-tag>
              <span class="descriptions_span"> <CheckCircleOutlined /></span>
            </a-descriptions-item>
            <a-descriptions-item v-else label="企业认证" :span="16">
              {{ app.standing }}
              <span class="descriptions_span" style="color: #31bc63">
                <CheckCircleOutlined
              /></span>
            </a-descriptions-item>
            <a-descriptions-item label="绑定手机号" :span="16">
              {{ app.tel }}
              <span
                class="descriptions_span"
                style="color: #31bc63"
                @click="navigateToChangeTel(1)"
                >换绑</span
              >
            </a-descriptions-item>
            <a-descriptions-item label="绑定邮箱" :span="16">
              {{ app.number }}
              <span
                class="descriptions_span"
                style="color: #31bc63"
                @click="navigateToChangeTel(3)"
                >换绑</span
              >
            </a-descriptions-item>
          </a-descriptions>
          <a-row style="margin-top: 60px; text-align: center">
            <a-button type="primary" style="width: 100%" @click="navigateToChangeTel(2)"
              >修改密码</a-button
            >
          </a-row>
          <a-row style="margin-top: 16px; text-align: center">
            <a-button style="width: 100%">退出账号</a-button>
          </a-row>
          <!-- <a-descriptions
            class="labelCenter marginTop12"
            layout="horizontal"
            size="small"
          >  
            <a-descriptions-item
              v-for="item in detailData"
              :key="item.value"
              :label="item.name"
              :span="3"
            >
              {{ item.value }}
            </a-descriptions-item>
          </a-descriptions>
          <a-row style="margin-top: 16px; text-align: center">
            <a-button type="primary" style="width: 100%">修改密码</a-button>
          </a-row>
          <a-row style="margin-top: 16px; text-align: center">
            <a-button style="width: 100%">退出账号</a-button>
          </a-row> -->
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style lang="less" scoped>
.app-container {
  width: 100%;
  // padding: 15px;
  // background: #ececec;
  // background: #c9c6c6;
}
.border-radius0 {
  border-radius: 0 !important;
}
.box-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 2px;
  border: 1px solid #e6ebf5;
  overflow: hidden;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  h1 {
    height: 48px;
    text-align: center;
    font-weight: bolder;
  }
  // .titleHeader {
  //   display: flex;
  //   justify-content: space-between;
  //   align-items: center;
  //   font-family: PingFang SC, PingFang SC;
  //   font-weight: 400;
  //   font-size: 16px;
  //   color: #3c3c3c;
  //   line-height: 24px;
  //   margin-top: 14px;
  //   text-align: left;
  //   .titleLeft {
  //     font-weight: bold;
  //   }
  // }
}

.fontSize8 {
  font-size: 8px;
  color: #4cc87e;
}

.box_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.basic_info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.marginTop12 {
  margin-top: 12px;
}
.basic_info_box {
  display: flex;
  align-items: center;
  color: #6e6e6e;
  .lt {
    margin-left: 12px;
    // width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    span {
      width: 100%;
    }
  }
  .rt {
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid #dedede;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
  }
}
.lt {
  margin-left: 12px;
  width: 100%;
  display: flex;
  flex-direction: column;
  .app_status {
    width: 100%;
    display: inline-block;
  }
}
.box {
  // background-color: #4cc87e;
  background-color: #4cc87e;
}
.box_avatar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .box_avatar_qq {
    font-size: 12px;
  }
}
.descriptions_span {
  display: inline-flex;
  float: right;
  cursor: pointer;
}
.labelCenter .ant-descriptions-item-label {
  text-align: center;
}
:deep(.ant-descriptions-view) {
  border: none !important;
  .ant-descriptions-row {
    border: none;
    th {
      border: none;
      background: none;
    }
  }
}
:deep(:where(.css-dev-only-do-not-override-1p3hq3p).ant-descriptions.ant-descriptions-bordered
    .ant-descriptions-item-label) {
  border-inline-end: none;
}
:deep(.css-dev-only-do-not-override-12oi33h .ant-typography) {
  margin-bottom: 0;
}
.image_group {
  display: flex;
  // flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  :deep(.ant-image) {
    margin-right: 12px;
  }
}
:deep(.ant-image) {
  margin-right: 12px;
}
.tips {
  font-size: 12px;
  color: #969696;
}

// .question-answer {
//   margin-bottom: 20px;
// }
.answer {
  background-color: #f9f9f9;
}

.other-questions {
  margin-top: 40px;
}
.box1 {
  font-size: 14px;
  span {
    font-size: 16px;
  }
  p {
    color: #6e6e6e;
  }
  ul {
    list-style: none; /* 去掉默认的圆点符号 */
    padding: 0;
    margin: 0;
    li {
      // list-style-type: none; /* 去掉默认的圆点符号 */
      font-size: 14px;
      color: #6e6e6e;
    }
  }
}
.box_left {
  padding: 0;
  margin: 0;
  ul {
    list-style: none; /* 去掉默认的圆点符号 */
    padding: 0;
    margin: 0;
    .title {
      font-weight: bold;
      font-size: 14px;
    }
    li {
      font-size: 14px;
      color: #6e6e6e;
      p {
        background-color: #f9f9f9;
        display: block;
        padding: 12px;
      }
    }
  }
}
</style>
